<template>
  <div class="test-detail-container">
    <div class="test-title">{{ title }}</div>
    <div class="test-main flex-box">
      <div class="test-content left-main">
        <div class="question-list">
          <div
              class="list-item question"
              v-for="(item, index) in list"
              :key="item.id"
          >
            <div class="item-main view-box question-main">
              <div class="title">
                <span>{{ index + 1 }}</span>
                <span class="type">{{ problemType[item.ptype] }}</span>
                <span>({{ item.criteria }}分)</span>
                <span>{{ item.desc }}</span>
              </div>
              <div class="answer-area">
                <template class="sin-choice" v-if="item.ptype !== '简答'">
                  <div class="option" v-for="(v, k) in item.chooses" :key="k + '' + v">
                    <input
                        :type="item.ptype | inputType"
                        :id="item.id + '' + k"
                        :name="'t' + index"
                        :value="k"
                        :disabled="status === constants.status.FINISHED"
                        v-model="sheet[index]"
                        style="display: none"
                    />
                    <label :for="item.id + '' + k">
                      <span
                          v-if="item.ptype===0"
                          :class="[
                          'chose-icon', 'circle',
                          {
                            chosen:
                              sheet[index] === k,
                          },
                          {
                            wrong:
                              status === constants.status.FINISHED &&
                              !item.isRight
                          },
                        ]"
                      ></span>
                      <span
                          v-else
                          :class="[
                          'chose-icon', 'square',
                          {
                            chosen:
                              sheet[index].includes(k),
                          },
                          {
                            wrong:
                              status === constants.status.FINISHED &&
                              !item.isRight
                          },
                        ]"
                      ></span>
                      <span class="text">{{ v }}</span>
                    </label>
                  </div>
                </template>
                <template class="text" v-else>
                  <div class="text-area">
                    <textarea
                        class="answer-text post-text"
                        v-model="sheet[index]"
                        rows="4"
                        placeholder="写下你的答案"
                    ></textarea>
                  </div>
                </template>
              </div>
            </div>
            <div
                class="item-main view-box answer-main"
                v-if="status === constants.status.FINISHED"
            >
              <div :class="item.isRight ? 'right' : 'wrong'">
                <span>正确答案：{{ item.rightAnswer.toString() | toABCD()}} </span>
                <span v-if="item.answer === item.submitRes">你选对了 </span>
                <span v-else>你选错了 </span>
                <span>{{ item.score || '0' }}/{{ item.criteria }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="test-sheet right-side">
        <div class="sheet-main view-box">
          <template v-if="status !== constants.status.FINISHED">
            <div class="sheet-title">答题卡</div>
            <div class="qids">
              <div
                  class="qid"
                  v-for="(q, i) in sheet"
                  :key="q.toString()"
                  :class="{ answered: q.toString().length > 0 }"
              >
                {{ i + 1 }}
              </div>
            </div>
            <div class="primary-btn" @click="submitExam">提交</div>
          </template>
          <template v-else>
            <div>本次得分：</div>
            <div class="score">{{ result.effectScore }}/{{ result.score }}</div>
            <div class="time">提交时间：{{ result.time }}</div>
            <div>
              如果你认为本次测试成绩不理想，可以选择<span class="again"
            >再做一次</span
            >
            </div>
          </template>
        </div>
      </div>
      <button @click="test()" style="position: fixed; left: 10px; bottom: 10px">
        test
      </button>
    </div>
  </div>
</template>

<script>
import constants from "_u/constants";

export default {
  name: "TestDetailView",
  data() {
    let cons = {
      status: constants.TEST_STATUS,
      type: constants.TEST_TYPE,
    };
    return {
      isRecord: false,
      examId:"",
      examRecordId:"",

      id: "",
      list: [],
      problemType:["单选","多选","判断","简答"],


      constants: cons,
      status: "进行中",
      sheet: [],
      title: "第二章 单元测试一",
      result: {
        effectScore: 20,
        score: 25,
        time: "2022-5-1",
      },
    };
  },
  mounted() {
    var examId = this.$route.params.examId;
    if(examId == null){
      this.isRecord = true;
      this.examRecordId = this.$route.params.examRecordId;
      this.queryExamSubmission(this.examRecordId);
      this.status = this.constants.status.FINISHED;
    } else {
      this.examId = examId;
      this.queryExamProblems(examId);
      this.status = this.constants.status.ON;
    }

  },
  filters: {
    inputType(ptype) {
      switch (ptype) {
        case 0:
          return "radio";
        case 1:
          return "checkbox";
        default:
          return "text";
      }
    },
    toABCD(str) {
      let r = str.split(',');
      return r.map(v => String.fromCharCode(v.charCodeAt(0)+17)).toString()
    }
  },
  methods: {
    queryExamProblems(examId){
      this.$api.queryExamProblems({examId}).then((res) => {
        let list = res.data.data;
        list.forEach((v,i)=> {
          v.ptype = v.type;
          if (v.ptype === 1) {
            this.sheet[i] = [];
          } else {
            this.sheet[i] = '';
          }
        })
        this.list.push(...list);
        console.log(this.sheet);
      });
    },
    numberToIndex(answer) {
      return 3-Math.log2(answer)
    },
    numberToIndexs(answer) {
      let result = [];
      if(answer & 8) {
        result.push(0);
      }
      if(answer & 4) {
        result.push(1);
      }
      if(answer & 2) {
        result.push(2);
      }
      if(answer & 1) {
        result.push(3);
      }
      return result;
    },
    queryExamSubmission(examRecordId){
      this.$api.queryExamSubmission({examRecordId}).then((res) => {

        let list = res.data.data;
        list.forEach((v,i) => {
          let rightAns = parseInt(v.answer),
              myAns = parseInt(v.submitRes);
          if (v.ptype === 0) {
            this.sheet[i] = this.numberToIndex(myAns);
            v.rightAnswer = this.numberToIndex(rightAns);
          } else {
            this.sheet[i] = this.numberToIndexs(myAns);
            v.rightAnswer = this.numberToIndexs(rightAns);
          }
          v.isRight = rightAns === myAns;

        });
        this.list.push(...list);
      });
    },
    submitExam() {
      let answerResult = this.sheet.map((v,i) => {
        let problem = this.list[i];
        let result = {
          pId: problem.id,
          submitRes: ''
        };
        if (Array.isArray(v)) {
          result.submitRes = v.reduce((a,b) => a+Math.pow(2,3-b), 0).toString();
        } else {
          result.submitRes = Math.pow(2,3-v).toString();
        }
        return result;
      })
      let result = {
        examId: this.examId,
        submissions: answerResult
      }

      this.$api.submitExam(result).then((res) => {
        console.log(res)
      });

      console.log('result: ',result);
    }
  },
};
</script>

<style scoped lang="scss">
.question {
  margin: 20px 0;
}

.item-main,
.sheet-main {
  margin: 20px 0;
  padding: 20px 30px;
}

.question-main .title {
  > span {
    margin-right: 10px;
  }

  .type {
    background: #fff;
    border-radius: 5px;
    padding: 2px 5px;
    border: 1px solid #619dff;
    color: #619dff;
    font-size: 14px;
  }
}

.answer-area {
  padding: 10px;
}

.option {
  margin: 5px 0;

  label {
    cursor: pointer;
  }

  .chose-icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 3.5px solid #afafaf;
    margin-right: 10px;
    transform: translateY(2px);
    background: #fff;
    transition: 0.2s;
  }

  .chose-icon.chosen {
    transition: 0.2s;
    background: #619dff;
  }

  .chosen.wrong {
    background: #da6d6d;
  }

  .circle {
    border-radius: 50%;
  }
}

.answer-main {
  .right {
    color: #619dff;
  }

  .wrong {
    color: #da6d6d;
  }
}

.answer-text {
  margin-top: 20px;
}

.test-sheet {
  .sheet-main {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .sheet-title {
    flex-basis: 30px;
    text-align: center;
  }

  .qids {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
  }

  .qid {
    width: 40px;
    height: 40px;
    margin: 10px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    background: #fff;

    &.answered {
      background: #619dff;
      color: white;
    }
  }

  .score {
    margin: 20px 0;
    text-align: center;
    font-size: 28px;
    color: #357ff8;
    text-shadow: 0 4px 4px #00000040;
  }

  .time {
    margin-bottom: 20px;
  }

  .again {
    color: #619dff;
    text-decoration: underline;
    cursor: pointer;
    transition: 0.2s;

    &:hover {
      color: #2c6fdf;
      transition: 0.2s;
    }
  }
}
</style>
